<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-11 10:40:36
 * @LastEditTime: 2019-11-04 15:37:22
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div id="chinaMap"></div>
</template>

<script>

// import HighCharts from 'highcharts'
import chinaData from '@s/Map/china'
// import Highcharts from 'highcharts/highmaps'
// var Highcharts = require('highcharts/highmaps');
// import Highmaps from 'highcharts/modules/map';
import Highcharts from 'highcharts/highstock';
// import HighchartsMore from 'highcharts/highcharts-more';
// import HighchartsDrilldown from 'highcharts/modules/drilldown';
// import Highcharts3D from 'highcharts/highcharts-3d';
import Highmaps from 'highcharts/modules/map';

// HighchartsMore(Highcharts)
// HighchartsDrilldown(Highcharts);
// Highcharts3D(Highcharts);
Highmaps(Highcharts);

export default {
    name: 'chinaMap',
    data: ()=> {
        return {
            data: [
                {'name': '北京', 'value': 5}, {'name': '天津', 'value': 4}, {'name': '河北', 'value': 3}, {

                    'name': '山西',

                    'value': 1

                }, {'name': '内蒙古', 'value': 2}, {'name': '辽宁', 'value': 3}, {'name': '吉林', 'value': 3}, {

                    'name': '黑龙江',

                    'value': 2

                }, {'name': '上海', 'value': 5}, {'name': '江苏', 'value': 4}, {'name': '浙江', 'value': 4}, {

                    'name': '安徽',

                    'value': 1

                }, {'name': '福建', 'value': 1}, {'name': '江西', 'value': 5}, {'name': '山东', 'value': 2}, {

                    'name': '河南',

                    'value': 1

                }, {'name': '湖北', 'value': 2}, {'name': '湖南', 'value': 3}, {'name': '广东', 'value': 5}, {

                    'name': '广西',

                    'value': 4

                }, {'name': '海南', 'value': 6}, {'name': '重庆', 'value': 3}, {'name': '四川', 'value': 5}, {

                    'name': '贵州',

                    'value': 4

                }, {'name': '云南', 'value': 4}, {'name': '西藏', 'value': 0}, {'name': '陕西', 'value': 1}, {

                    'name': '甘肃',

                    'value': 2

                }, {'name': '青海', 'value': 4}, {'name': '宁夏', 'value': 2}, {'name': '新疆', 'value': 5}, {

                    'name': '台湾',

                    'value': 1

                }, {'name': '香港', 'value': 1}, {'name': '澳门', 'value': 4}, {'name': '南海诸岛', 'value': 5}, {

                    'name': '南海诸岛',

                    'value': 5}
            ]
        }
    },
    mounted: function(){
        // this.$nextTick(function () {
            // Code that will run only after the
            // entire view has been rendered
            this.showMap();
        // })
    },
    methods: {
        showMap: function(){
            console.log(chinaData)
            var _self = this
            this.map = Highcharts.chart('chinaMap', { 
                title: {
                    text: '中国地图'
                },
                colorAxis: {
                    stop: [
                        [0, '#c4463a'],
                        [0, '#fffbbc'],
                        [0, '#006cee'],
                    ],
                    min: 0,
                    max: 5
                },
                series: [
                    {
                        data: _self.data,
                        name: '中国城市地图',
                        mapData: chinaData.features,
                        joinBy: 'properties.name'
                    }
                ],
                tooltip: {
                    useHTML: true,
                    headerFormat: '<table><tr></tr><td>{point.name}</td></tr>',
                    pointFormat: '<tr><td>城市名</td><td>{point.properties.fullname}</td></tr>',
                    footerFormat:'</table>'
                }
            });
        }
    }
}

</script>